import { Map } from "mapbox-gl";
const FILE_BASE_PATH = process.env.VUE_APP_BASE_PATH + process.env.VUE_APP_BASE_API + "/files";
const base = process.env.VUE_APP_BASE_PATH + process.env.VUE_APP_BASE_API + "/features";

export function addLayers(map: Map, dataset_id: string, feature_class_list: Array<any>) {
  const layers = [];
  if (map) {
    for (let i = 0; i < feature_class_list.length; i++) {
      const f_c = feature_class_list[i];
      if (!map.getSource(f_c.id)) {
        map.addSource(f_c.id, {
          type: "vector",
          tiles: [`${base}/mvt/${dataset_id}/${f_c.id}/{z}/{x}/{y}`],
          promoteId: "id",
        });
        if (f_c.type === 1 && f_c.icons?.length) {
          if (!map.hasImage(f_c.id)) {
            map.loadImage(FILE_BASE_PATH + `/${f_c.icons[0].auto_name}`, (error, image: any) => {
              if (!error) map.addImage(f_c.id, image);
            });
          }
        }
        if (f_c.property.label) {
          const layer = addText(map, f_c, "-texts");
          layer && layers.push(layer);
        }
        switch (f_c.type) {
          case 1:
            if (f_c.icons.length) {
              const layer = addIcon(map, f_c, "-icons");
              layer && layers.push(layer);
            } else {
              const layer = addCircle(map, f_c, "-circles");
              layer && layers.push(layer);
            }
            break;
          case 2:
            {
              const layer = addLine(map, f_c, "-lines");
              layer && layers.push(layer);
            }
            break;
          case 3:
            {
              const layer1 = addLine(map, f_c, "-fill-line");
              layer1 && layers.push(layer1);
              const layer2 = addFill(map, f_c, "-fills");
              layer2 && layers.push(layer2);
            }
            break;
        }
      }
    }
  }
  return layers;
}

export function addText(map: Map, featureClass: any, suffix: string) {
  if (!map.getLayer(featureClass.id + suffix)) {
    map.addLayer({
      id: featureClass.id + suffix,
      source: featureClass.id,
      ["source-layer"]: featureClass.id,
      type: "symbol",
      maxzoom: featureClass.property.maxzoom || 22,
      minzoom: featureClass.property.minzoom || 14,
      layout: {
        "text-allow-overlap": featureClass.property["text-allow-overlap"],
        "text-anchor": featureClass.property["text-anchor"] || "center",
        "text-offset": featureClass.property["text-offset"] || [0, 0],
        "text-field": ["get", `${featureClass.property.label}`],
        "text-rotation-alignment": "map",
        "symbol-placement": featureClass.type == 2 ? "line" : "point",
        "text-font": ["Open Sans Bold"],
        "text-size": [
          "case",
          ["has", "text-size"],
          ["to-number", ["get", "text-size"], 16],
          !!featureClass.property["text-size"],
          ["to-number", featureClass.property["text-size"] ? featureClass.property["text-size"] : null, 16],
          16,
        ],
        visibility: featureClass.property.visible ? "visible" : "none",
      },
      paint: {
        "text-color": [
          "case",
          ["has", "text-color"],
          [
            "to-color",
            ["get", "text-color"],
            `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},${Math.random()})`,
          ],
          !!featureClass.property["text-color"],
          [
            "to-color",
            featureClass.property["text-color"] ? featureClass.property["text-color"] : null,
            `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},${Math.random()})`,
          ],
          `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`,
        ],
      },
    });

    return {
      id: featureClass.id + suffix,
      source_id: featureClass.id,
    };
  }
}

export function addIcon(map: Map, featureClass: any, suffix: string) {
  if (!map.getLayer(featureClass.id + suffix)) {
    map.addLayer({
      id: featureClass.id + suffix,
      source: featureClass.id,
      ["source-layer"]: featureClass.id,
      maxzoom: featureClass.property.maxzoom || 22,
      minzoom: featureClass.property.minzoom || 10,
      type: "symbol",
      //不考虑偏移
      layout: {
        "icon-allow-overlap": featureClass.property["icon-allow-overlap"],
        "icon-offset": featureClass.property["icon-offset"] || [0, 0],
        "icon-image": featureClass.id,
        "icon-size": 1,
        visibility: featureClass.property.visible ? "visible" : "none",
      },
    });
    return {
      id: featureClass.id + suffix,
      source_id: featureClass.id,
    };
  }
}

export function addCircle(map: Map, featureClass: any, suffix: string) {
  if (!map.getLayer(featureClass.id + suffix)) {
    map.addLayer({
      id: featureClass.id + suffix,
      source: featureClass.id,
      ["source-layer"]: featureClass.id,
      maxzoom: featureClass.property.maxzoom || 22,
      minzoom: featureClass.property.minzoom || 10,
      type: "circle",
      paint: {
        "circle-color": [
          "case",
          ["has", "circle-color"],
          [
            "to-color",
            ["get", "circle-color"],
            `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},${Math.random()})`,
          ],
          !!featureClass.property["circle-color"],
          [
            "to-color",
            featureClass.property["circle-color"] ? featureClass.property["circle-color"] : null,
            `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},${Math.random()})`,
          ],
          `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`,
        ],
        "circle-radius": [
          "case",
          ["has", "circle-radius"],
          ["to-number", ["get", "circle-radius"], 5],
          !!featureClass.property["circle-radius"] || featureClass.property["circle-radius"] == 0,
          ["to-number", featureClass.property["circle-radius"] ? featureClass.property["circle-radius"] : null, 5],
          5,
        ],
        "circle-opacity": [
          "case",
          ["has", "circle-opacity"],
          ["to-number", ["get", "circle-opacity"], 1],
          !!featureClass.property["circle-opacity"] || featureClass.property["circle-opacity"] == 0,
          ["to-number", featureClass.property["circle-opacity"] ? featureClass.property["circle-opacity"] : null, 0],
          1,
        ],
      },
      layout: {
        visibility: featureClass.property.visible ? "visible" : "none",
      },
    });
    return {
      id: featureClass.id + suffix,
      source_id: featureClass.id,
    };
  }
}

export function addLine(map: Map, featureClass: any, suffix: string) {
  if (!map.getLayer(featureClass.id + suffix)) {
    map.addLayer({
      id: featureClass.id + suffix,
      source: featureClass.id,
      ["source-layer"]: featureClass.id,
      maxzoom: featureClass.property.maxzoom || 22,
      minzoom: featureClass.property.minzoom || 10,
      type: "line",
      paint: {
        "line-color": [
          "case",
          ["has", "line-color"],
          [
            "to-color",
            ["get", "line-color"],
            `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},${Math.random()})`,
          ],
          !!featureClass.property["line-color"],
          [
            "to-color",
            featureClass.property["line-color"] ? featureClass.property["line-color"] : null,
            `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},${Math.random()})`,
          ],
          `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`,
        ],
        "line-width": [
          "case",
          ["has", "line-width"],
          ["to-number", ["get", "line-width"], 3],
          !!featureClass.property["line-width"] || featureClass.property["line-width"] == 0,
          ["to-number", featureClass.property["line-width"] ? featureClass.property["line-width"] : null, 3],
          3,
        ],
        "line-opacity": [
          "case",
          ["has", "line-opacity"],
          ["to-number", ["get", "line-opacity"], 1],
          !!featureClass.property["line-opacity"] || featureClass.property["line-opacity"] == 0,
          ["to-number", featureClass.property["line-opacity"] ? featureClass.property["line-opacity"] : null, 1],
          1,
        ],
      },
      layout: {
        "line-cap": "round",
        "line-join": "round",
        visibility: featureClass.property.visible ? "visible" : "none",
      },
    });
    return {
      id: featureClass.id + suffix,
      source_id: featureClass.id,
    };
  }
}

export function addFill(map: Map, featureClass: any, suffix: string) {
  if (!map.getLayer(featureClass.id + suffix)) {
    map.addLayer({
      id: featureClass.id + suffix,
      source: featureClass.id,
      ["source-layer"]: featureClass.id,
      maxzoom: featureClass.property.maxzoom || 22,
      minzoom: featureClass.property.minzoom || 10,
      type: "fill",
      paint: {
        "fill-color": [
          "case",
          ["has", "fill-color"],
          [
            "to-color",
            ["get", "fill-color"],
            `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`,
          ],
          !!featureClass.property["fill-color"],
          [
            "to-color",
            featureClass.property["fill-color"] ? featureClass.property["fill-color"] : null,
            `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`,
          ],
          `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`,
        ],
        "fill-opacity": [
          "case",
          ["has", "fill-opacity"],
          ["to-number", ["get", "fill-opacity"], 0.5],
          !!featureClass.property["fill-opacity"] || featureClass.property["fill-opacity"] == 0,
          ["to-number", featureClass.property["fill-opacity"] ? featureClass.property["fill-opacity"] : null, 0.2],
          0.2,
        ],
      },
      layout: {
        visibility: featureClass.property.visible ? "visible" : "none",
      },
    });

    return {
      id: featureClass.id + suffix,
      source_id: featureClass.id,
    };
  }
}
